import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'

@inject('todo')
@observer
class TodoList extends Component {
  render() {
    const { todoDelete, changeCompleted, filterTodo } = this.props.todo
    console.log(this.props)
    return (
			<section className="main">
				<input className="toggle-all" type="checkbox" />
				<ul className="todo-list">
          {filterTodo.map((todo, index) => {
            return (
              <li key={index} className={todo.isCompleted ? 'completed' : ''}>
                <div className="view">
                  <input 
                    className="toggle"
                    onChange={event => changeCompleted(index, event.target.checked)}
                    checked={todo.isCompleted}
                    type="checkbox" />
                  <label>{todo.taskName}</label>
                  <button className="destroy" onClick={() => todoDelete(index)}></button>
                </div>
                <input className="edit" />
              </li>
            )
          })}
				</ul>
			</section>
    )
  }
}

export default TodoList